<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="../Styles/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="../Scripts/jquery.min.js"></script>
<script type="text/javascript" src="../Styles/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../Scripts/vue.min.js"></script>
<script type="text/javascript" src="../Styles/laypage/laypage.js"></script>
<script type="text/javascript" src="../Scripts/laydate/laydate.js"></script>
<style type="text/css">
   .main{
      width: 60%;
      margin-left: 10%;
   }
   #addDept{
     float: right;
            margin-right: 15px;
   }
</style>
</head>
<body>
  <div class="main">
     <div>
       <h2>部门管理</h2>
       <div>
         <table class="table table-bordered" id = "table">
           <tr class="success">
              <td colspan="5">
                部门列表<span class="glyphicon glyphicon-plus" id="addDept">新增部门</span>
              </td>
           </tr>
           <tr class="success">
             <th>序列</th>
             <th >部门名称</th>
             <th >部门负责人</th>
             <th >部门电话</th>
             <th>操作</th>
           </tr>
           <tr class="info" v-for="dept in deptList">
             <td>{{$index+1}}</td>
             <td name="deptName">{{dept.deptname}}</td>
             <td name="uname">{{dept.uname}}</td>
             <td name="deptPhone">{{dept.landphone}}</td>
             <td>
               <button type="button" class="btn btn-default btn-xs update" v-bind:value=dept.seorid>修改</button>
             </td>
           </tr>
         </table>
       </div>
     </div>
     <!-- 模态框修改信息 -->
         <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">修改部门信息</h4>
                </div>
                <div class="modal-body">
                    <form action="../addNotice" method="post" id="form" enctype="multipart/form-data">
                       <table class="table table-bordered">
                          <tr>
                             <td >部门编号</td>
                             <td id="update_deptno"></td>
                          </tr>
                          <tr>
                             <td>部门名称</td>
                             <td ><input type="text" id="deptName" /></td>
                          </tr>
                          <tr>
                             <td>部门负责人</td>
                             <td id="laderName"></td>
                          </tr>
                          <tr>
                             <td>部门电话</td>
                             <td><input type="text" id="deptPhone" /></td>
                          </tr>
                       </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>           
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="update_submit">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->

    </div>
     
     
  </div>
  
  <script type="text/javascript">
    $(function(){
    	$("#addDept").click(function(){
    		window.location.href="addDept.jsp";
   	 })
   	 
   	 var vue = new Vue({
   		 el:"#table",
   		 data:{deptList:""},
   		 methods:{
   			 getDeptList: function(){
   				 $.ajax({
   					 url:"../getDeptList",
   					 type:'post',
   					 dataType:'json',
   					 success : function(result){
   						 console.log(result);
   						 vue.deptList = result;
   					 }
   				 })
   			 }
   		 }
   	 })
    	vue.getDeptList();
    	
    	$("#table").on('click','.update',function(){
    		 var deptno=$(this).val();
    		 var deptName = $(this).parent("td").parent("tr").children("td[name='deptName']").html();
    		 var deptPhone = $(this).parent("td").parent("tr").children("td[name='deptPhone']").html();
    		 var uname = $(this).parent("td").parent("tr").children("td[name='uname']").html();
    		 $("#update_deptno").html(deptno);
    		 $("#deptName").val(deptName);
    		 $("#deptPhone").val(deptPhone);
    		 $("#laderName").html(uname);
    		 $("#myModal").modal("show");
    	})
    	
    	$("#update_submit").click(function(){
    		 var deptno = $("#update_deptno").html();
    		 var deptName = $("#deptName").val();
    		 var deptPhone = $("#deptPhone").val();
    		 var laderName = $("#laderName").html();
    		 $.ajax({
    			 url:'../changeSectionInfo2',
    			 type:'post',
    			 data:{'seorid':deptno,'deptname':deptName,'landphone':deptPhone},
    			 dataType:'json',
    			 success :function(result){
    				 if(result){
    					 alert("修改成功");
    					 vue.getDeptList()
    				 }
    			 }
    		 })
    	})
    	
    })
  </script>
</body>
</html>